<template>
	<view class="ordername">
		<view class="top">
			<view class="top_top">
				<view class="img">
					<image src="../logo.png" class="img"></image>
				</view>
				<view class="wenzi1">待发货</view>
				<view class="wenzi2">订单跟踪</view>
			</view>
			<view class="top_bottom">
				<view class="A">
					<view class="a0">
						收货人：
					</view>
					<view class="a1">
						嘿哈
					</view>
					<view class="mobile">
						18115215255
					</view>
				</view>
				<view class="B">收货地址:</view>
			</view>
			<view class="fenge"></view>
			<view class="wuliu">
				<view class="minc">物流信息</view>
				<view class="minc1">无</view>
			</view>
		</view>
		<view class="goods-info">
			<view class="infotop">商品列表</view>
			<view class="infocenter">
				<view class="goodsimgs">
					<image src="../logo.png" class="good_img"></image>
				</view>
				<view class="goodsjianjie">
					<view class="goods_minzi">
						Redmik20[2种规格]
					</view>
					<view class="goods_size">
						版本：6GB+64GB,颜色：火焰红
					</view>
					<view class="goods_price">
						￥1999.00
						<i class="spn">x1</i>
					</view>
				</view>
			</view>
			<view class="goods_prices">
				￥1999.00
			</view>
		</view>
		<view class="user_shuo">
			<view class="user_minc">买家留言</view>
			<view class="user_minc1">无</view>
		</view>
		<view class="goods_yufei">
			<view class="shangpinjine">
				<view class="shangpinjine_minc">商品金额</view>
				<view class="shangpinjine_minc1">￥1999.00</view>
			</view>
			<view class="shangpinyunfei">
				<view class="shangpinyunfei_minc">运费</view>
				<view class="shangpinyunfei_minc1">+0.00</view>
			</view>
			<view class="shifujine">
				￥1999.00
			</view>
		</view>
         <view class="dingdan">
         	<view class="bianhao">
         		220822192416050166
         	</view>
			<view class="data">
				 2022-08-22 19:24:30
			</view>
			<view class="fangshi">
				在线支付
			</view>
			<view class="fukuan">
				钱包余额
			</view>
			<view class="peisong">
				普通快递
			</view>
         </view>
		 <view class="kefu">
		 	<i></i>
			联系客服
		 </view>
	</view>
</template>

<script>
	import {apiExtOrderFahuo} from "../../api/goods.js"
	export default {
		data() {
			return {
				goodslist:{}
			}
		},
		methods: {
			getapiExtOrderFahuo(){
				apiExtOrderFahuo().then(res=>{
					console.log(res);
				})
			}
		},
		onReady(){
			this.getapiExtOrderFahuo()
		}
	}
</script>

<style lang="scss" scoped>
	.ordername {
		background-color: #ccc;
		height: 1600rpx;
		.top {
			background-color: #fff;
			position: relative;
		
			.top_top {
				width: 100%;
				height: 109rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				border: #ccc 1px solid;
		
				.img {
					width: 80rpx;
					height: 80rpx;
					float: left;
				}
		
				.wenzi1 {
					width: 370rpx;
					height: 34rpx;
					float: left;
					margin-top: 20rpx;
					font-size: 25rpx;
					margin-left: 20rpx;
					color: #323233;
				}
		
				.wenzi2 {
					width: 132rpx;
					height: 28rpx;
					float: right;
					margin-top: 20rpx;
					font-size: 25rpx;
					color: #ccc;
				}
		
				.wenzi2::after {
					content: ">";
					color: #ccc;
				}
			}
		
			.top_bottom {
				width: 100%;
				height: 109rpx;
				box-sizing: border-box;
				padding: 10rpx 40rpx;
		
				.A {
					height: 43rpx;
					width: 100%;
		
					.a0 {
						width: 100rpx;
						height: 43rpx;
						color: #323233;
						float: left;
						font-size: 25px;
						line-height: 43rpx;
					}
		
					.a1 {
						width: 50rpx;
						height: 43rpx;
						color: #323233;
						float: left;
						font-size: 25rpx;
						line-height: 43rpx;
					}
		
					.mobile {
						width: 150rpx;
						float: right;
						font-size: 25rpx;
						line-height: 43rpx;
					}
				}
		
				.B {
					width: 100%;
					height: 29rpx;
					font-size: 21rpx;
					color: #999;
				}
		
				.B::after {
					content: "1";
				}
			}
		
			.fenge {
				position: absolute;
				left: 0;
				right: 0;
				height: 4rpx;
				content: "";
				background-size: 3rpx;
				background: repeating-linear-gradient(-45deg, #ff6c6c, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
				;
			}
		
			.wuliu {
				width: 100%;
				height: 88rpx;
				box-sizing: border-box;
				padding: 10rpx 40rpx;
		
				.minc {
					width: 50%;
					float: left;
					line-height: 88rpx;
					font-size: 27rpx;
					color: #979699;
				}
		
				.minc1 {
					width: 50%;
					float: left;
					text-align: right;
					line-height: 88rpx;
					font-size: 27rpx;
					color: #979699;
				}
			}
		}
		
		.goods-info {
			width: 100%;
			height: 380rpx;
			margin-top: 20rpx;
			background-color: #fff;
		
			.infotop {
				height: 77rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 10rpx 0;
				padding-left: 30rpx;
				line-height: 77rpx;
				font-size: 27rpx;
				color: #323233;
				border-bottom: 1px solid #ccc;
			}
		
			.infocenter {
				width: 100%;
				height: 211rpx;
				box-sizing: border-box;
				padding: 30rpx 20rpx;
		
				.goodsimgs {
					width: 180rpx;
					float: left;
					height: 180rpx;
		
					.good_img {
						width: 100%;
						height: 100%;
					}
				}
		
				.goodsjianjie {
					width: 480rpx;
					height: 100%;
					float: right;
		
					.goods_minzi {
						font-size: 27rpx;
						line-height: 32rpx;
						color: #323233;
					}
		
					.goods_size {
						font-family: 24rpx;
						line-height: 39rpx;
						height: 105rpx;
						color: #969799;
					}
		
					.goods_price {
						font-size: 36rpx;
						line-height: 42rpx;
						color: #1BA784;
						position: relative;
		
						.spn {
							position: absolute;
							right: 0;
							font-style: normal;
						}
					}
				}
		
			}
		
			.goods_prices {
				height: 87rpx;
				text-align: right;
				font-size: 36rpx;
				line-height: 87rpx;
				color: #1BA784;
				box-sizing: border-box;
				padding-right: 20rpx;
			}
			
			.goods_prices::before {
				content: "商品小计";
				font-size: 36rpx;
				line-height: 87rpx;
				color: #323232;
				;
			}
		}
		.user_shuo {
			margin-top: 20rpx;
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 20rpx;
			.user_minc {
				width: 50%;
				float: left;
				line-height: 88rpx;
				font-size: 27rpx;
				color: #979699;
			}
		
			.user_minc1 {
				width: 50%;
				float: left;
				text-align: right;
				line-height: 88rpx;
				font-size: 27rpx;
				color: #979699;
			}
		}
		.goods_yufei{
			width: 100%;
			height: 250rpx;
			margin-top: 20rpx;
			background-color: #fff;
			.shangpinjine{
				width: 100%;
				height: 77rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				.shangpinjine_minc{
					width: 50%;
					float: left;
					line-height: 88rpx;
					font-size: 27rpx;
					color: #979699;
				}
				.shangpinjine_minc1{
					width: 50%;
					float: left;
					text-align: right;
					line-height: 88rpx;
					font-size: 27rpx;
					color: #323233;
				}
			}
			.shangpinyunfei{
				width: 100%;
				height: 77rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				.shangpinyunfei_minc{
					width: 50%;
					float: left;
					line-height: 88rpx;
					font-size: 27rpx;
					color: #979699;
				}
				.shangpinyunfei_minc1{
					width: 50%;
					float: left;
					text-align: right;
					line-height: 88rpx;
					font-size: 27rpx;
					color: #323233;
				}
			}
			.shifujine{
				width: 100%;
				height: 77rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				text-align: right;
				line-height: 77rpx;
				color: #1BA784;
				font-size: 36rpx;
			}
			.shifujine::before{
				content: "实付款：";
				color: #323232;
				font-size: 36rpx;
			}
		}
		.dingdan{
			width: 100%;
			height: 280rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			.bianhao{
				height: 48rpx;
				width: 100%;
				line-height: 48rpx;
				color: #323232;
				font-size: 24rpx;
			}
			.bianhao::before{
				content: "订单编号：";
				color: #969799;
				font-size: 24rpx;
			}
			.fukuan{
				height: 48rpx;
				width: 100%;
				line-height: 48rpx;
				color: #323232;
				font-size: 24rpx;
			}
			.fukuan::before{
				content: "付款方式：";
				color: #969799;
				font-size: 24rpx;
			}
			.data{
				height: 48rpx;
				width: 100%;
				line-height: 48rpx;
				color: #323232;
				font-size: 24rpx;
			}
			.data::before{
				content: "下单时间：";
				color: #969799;
				font-size: 24rpx;
			}
			.fangshi{
				height: 48rpx;
				width: 100%;
				line-height: 48rpx;
				color: #323232;
				font-size: 24rpx;
			}
			.fangshi::before{
				content: "支付方式：";
				color: #969799;
				font-size: 24rpx;
			}
			.peisong{
				height: 48rpx;
				width: 100%;
				line-height: 48rpx;
				color: #323232;
				font-size: 24rpx;
			}
			.peisong::before{
				content: "配送方式：";
				color: #969799;
				font-size: 24rpx;
			}
		}
		.kefu{
			width: 100%;
			height: 64rpx;
			text-align: right;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			position: fixed;
			left: 0;
			right: 50%;
			bottom: 0;
			background-color: #fff;
			font-size: 32rpx;
			color: #000;
		}
	}

	
	
	
	
	
	
	
	
</style>
